<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <el-form inline>
                <el-form-item>
                    <el-input size="mini" v-model="searchObj.roleName" placeholder="角色名称" />
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" size="mini" @click="getRoleList()">查询</el-button>
                <el-button type="default" size="mini" @click="clear">清空</el-button>
            </el-form>
            <div style="margin-bottom: 20px">
                <el-button type="primary" @click="addRole" size="mini">添 加</el-button>
                <el-button type="danger" size="mini">批量删除</el-button>
            </div>

            <el-table :data="roleList" border stripe v-loading="loading">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="序号" width="80" align="center" />

                <el-table-column prop="roleName" label="角色名称">
                    <template slot-scope="{row}">
                        <template v-if="row.flag">
                            <el-input v-model="row.roleName" ref="inputRef" size="small"></el-input>
                            <el-button type="warning" size="small" icon="el-icon-refresh" @click="cancelEdit(row)">
                            </el-button>
                        </template>
                        <span v-else>{{ row.roleName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="280">
                    <template slot-scope="{row,$index}">
                        <el-button type="info" size="mini" icon="el-icon-info"
                            @click="$router.push(`/acl/role/auth/?id=${row.id}&roleName=${row.roleName}`)"></el-button>
                        <el-button type="primary" size="mini" icon="el-icon-check" @click="updateRole(row)"></el-button>
                        <el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="toEdit(row, $index)">
                        </el-button>
                        <el-popconfirm :title="`您确定删除吗？`" style="margin-left: 10px;" @confirm="remove(row)">
                            <el-button slot="reference" type="danger" size="mini" icon="el-icon-delete-solid">
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="getRoleList" :current-page="page"
                :total="total" :page-size="limit" :page-sizes="[1, 3, 5, 10]" style="padding: 20px 0;"
                layout="prev, pager, next, jumper, ->, sizes, total" />


            <!-- 点击添加的对话框 -->
            <el-dialog title="添加角色" :visible.sync="dialogFormVisible" width="30%">
                <el-form>
                    <h6>请输入新名称</h6>
                    <el-form-item>
                        <el-input v-model="role.roleName" autocomplete="off" size="mini"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
                    <el-button type="primary" @click="addConfirm" size="mini">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import { role } from '@/api'

export default {
    data() {
        return {
            loading: false,
            total: 99,
            page: 1,
            limit: 3,
            roleList: [], //分页列表
            searchObj: {
                roleName: ''//搜索名字
            },
            dialogFormVisible: false,
            role: {
                roleName: ''
            }
        }
    },
    mounted() {
        this.getRoleList()
    },
    methods: {
        // 获取角色分页列表
        async getRoleList(page = 1) {
            this.loading = true
            this.page = page
            let result = await this.$API.role.getPageList(this.page, this.limit, this.searchObj)
            console.log(result);
            this.roleList = result.data.items.map(item => {
                item.flag = false //用于标识是否显示编辑输入框的属性
                item.originRoleName = item.roleName  //缓存角色名称，用于取消
                return item
            })
            this.total = result.data.total
            this.loading = false
            this.$message.success('数据更新成功')
        },
        // 设置一页显示几条数据
        handleSizeChange(limit) {
            this.limit = limit
            this.getRoleList()
        },
        // 清空搜索框
        clear() {
            this.searchObj.roleName = ''
            this.getRoleList()
        },
        //点击添加按钮
        addRole() {
            this.role = {}
            this.dialogFormVisible = true
        },
        // 点击确定按钮
        async addConfirm() {
            await this.$API.role.save(this.role)
            this.$message.success('添加角色成功')
            this.dialogFormVisible = false
            this.getRoleList()
        },
        // 点击删除按钮 删除某个角色
        async remove(row) {
            await this.$API.role.removeById(row.id)
            this.$message.success('删除成功')
            this.getRoleList()
        },
        // 点击修改角色按钮
        toEdit(row, $index) {
            // console.log(row, $index);
            row.flag = true
            this.$nextTick(() => {
                this.$refs.inputRef.focus()
                console.log(this.$refs.inputRef);
            })
        },
        // 取消修改
        cancelEdit(row) {
            role.roleName = role.originRoleName
            row.flag = false
            this.$message.warning('取消角色修改')
        },
        // 点击更新按钮 更新角色
       async updateRole(row){
            await this.$API.role.updateById({id:row.id,roleName:row.roleName})
            this.$message.success('更新角色成功')
            this.getRoleList()
        }
    },
}
</script>

<style scoped>

</style>